<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基本监测指标</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal">
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">出院日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个出院日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="searchData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">


            <div th:class="row">

                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            基本监测指标
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">非手术患者</span>
                                            <h3 id="noOperationPatientCount"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">住院患者总例数</span>
                                            <h3 id="inPatientCount"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">死亡例数</span>
                                            <h3 id="deathPatientCount"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">当日再住院例数</span>
                                            <h3 id="inRegAgainCount"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">平均住院日</span>
                                            <h3 id="avgInDays"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">平均住院费用</span>
                                            <h3 id="avgInTotalFee"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">患者手术总台次</span>
                                            <h3 id="operationCount"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">手术患者死亡例数</span>
                                            <h3 id="operationDeathCount"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">平均术前住院日</span>
                                            <h3 id="avgDaysBeforeOperation"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">手术患者住院费用</span>
                                            <h3 id="operationPatientAvgFee"></h3>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                    </section>
                </div>
            </div>
            <!--body wrapper end-->
        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        searchData();
    });

    function searchData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getBaseIndex",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#noOperationPatientCount').text(result.noOperationPatientCount);
                    $('#inPatientCount').text(result.inPatientCount);
                    $('#deathPatientCount').text(result.deathPatientCount);
                    $('#inRegAgainCount').text(result.inRegAgainCount);
                    $('#avgInDays').text(result.avgInDays);
                    $('#avgInTotalFee').text(result.avgInTotalFee);
                    $('#operationCount').text(result.operationCount);
                    $('#operationDeathCount').text(result.operationDeathCount);
                    $('#avgDaysBeforeOperation').text(result.avgDaysBeforeOperation);
                    $('#operationPatientAvgFee').text(result.operationPatientAvgFee);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + JSON.parse(errorMsg));

            }
        });//end ajax
    }
</script>
</body>